<script setup>
import { ref, unref } from "vue";

const props = defineProps({
  src: {
    type: String,
  },
});

const muted = ref(true);
const audioRef = ref();
const emits = defineEmits(["canplay"]);

function playAudio(isPlay) {
  muted.value = isPlay;
  if (!unref(muted)) {
    unref(audioRef).play();
  } else {
    unref(audioRef).pause();
  }
}

defineExpose({
  play: () => {
    muted.value = false;
    unref(audioRef).play();
  },
});
</script>

<template>
  <div class="container" @click="playAudio(!muted)">
    <img v-show="!muted" src="./music_open.png" alt="" />
    <img v-show="muted" src="./music_close.png" alt="" />
  </div>

  <audio
    hidden="hidden"
    preload="auto"
    ref="audioRef"
    @canplay="() => emits('canplay', $event)"
    loop
  >
    <source src="./bpm.mp3" type="audio/mpeg" />
  </audio>
</template>

<style scoped>
.container {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  position: fixed;
  right: 20px;
  top: 28px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container img {
  width: 100%;
}
</style>
